<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css"
          href="plugin/jquery-easyui-1.3.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="plugin/jquery-easyui-1.3.3/themes/icon.css">
    <script type="text/javascript"
            src="plugin/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript"
            src="plugin/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="plugin/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="plugin/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="plugin/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="plugin/kindeditor/lang/zh_CN.js"></script>
</head>
<body style="margin:1px;margin-top: 3px;" id="ff">
<table id="dg"   class="easyui-datagrid" pagination="true"
       rownumbers="true" fit="true"
       url="/user/search" toolbar="#tb">
    <thead data-options="frozen:true">
    <tr>
        <th field="cb" checkbox="true" align="center"></th>
        <th field="id" width="10%" align="center" hidden="true">ID</th>
        <th field="username" width="150" align="center">用户名</th>
        <th field="telphone" width="150" align="center">电话</th>
        <th field="email" width="200" align="center">邮箱</th>
        <th field="address" width="200" align="center">地址</th>
        <th field="sex" width="100" align="center">性别</th>
        <th field="age" width="100" align="center">年龄</th>
        <th field="status" width="90" align="center" formatter="showChineseStatus">状态</th>
        <!-- <th field="content" width="70" align="center"
            formatter="formatHref">操作
        </th> -->
    </tr>
    </thead>
</table>

<div id="tb">
    <div>
        &nbsp;<span style="font-size: 15px;">用户名：</span>&nbsp;<input style="height: 20px;font-size: 15px" type="text" id="articleTitle" size="20"
                              onkeydown="if(event.keyCode==13) searchArticle()"/>&nbsp; <a
            href="javascript:searchArticle()" class="easyui-linkbutton"
            iconCls="icon-search" plain="true">搜索</a>
    </div>
    <div style="margin-top: 10px;margin-bottom: 10px;">
        <a
            href="javascript:openArticleModifyDialog()"
            class="easyui-linkbutton" iconCls="icon-edit" plain="false">编辑</a> 
        <a
            href="javascript:deleteArticle()" class="easyui-linkbutton"
            iconCls="icon-remove" plain="false">删除</a>
    </div>
</div>

<div id="dlg" class="easyui-dialog"
     style="width: 870px;height:555px;padding: 10px 20px; position: relative; z-index:1000;"
     closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <table cellspacing="15px">
            <tr>
                <td>用户ID：</td>
                <td><span id="userid"></span>
                </td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="username" name="username"
                           class="easyui-validatebox" required="true"/>&nbsp;
                    <font color="red">*</font>
                    <input id="uid" name="id" type="hidden" value="0">
                </td>
            </tr>
            <tr>
                <td>电话：</td>
                <td><input type="text" id="telphone" name="telphone"/>
                </td>
            </tr>
           <tr>
                <td>邮箱：</td>
                <td><input type="text" id="email" name="email"/>
                </td>
            </tr>
            <tr>
                <td>地址：</td>
                <td><input type="text" id="address" name="address"/>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="text" id="sex" name="sex"/>
                </td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td><input type="text" id="age" name="age"/>
                </td>
            </tr>
            <tr>
                <td>状态：</td>
                <td>
                    <select id="status" name="status">
                        <option value="ON">可用</option>
                        <option value="OFF">禁用</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:saveUser()" class="easyui-linkbutton"
       iconCls="icon-ok">保存</a> <a href="javascript:closeArticleDialog()"
                                   class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>


<script type="text/javascript">
    var url = "/user/insert";
    var method="POST";
    $(function () {
        //详情编辑器
        KindEditor.ready(function (K) {
            this.editor
                = K.create('textarea[id="editor"]', {
                items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|','multiimage',
                    'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink'],
                uploadJson: '${pageContext.request.contextPath}/uploadImages',
                filePostName: 'file',
                fileManagerJson: '/images',
                allowFileManager: true
            });
        });
    });

    function searchArticle() {
        $("#dg").datagrid('load', {
            "username": $("#articleTitle").val()
        });
    }

    function deleteArticle() {
        var selectedRows = $("#dg").datagrid('getSelections');
        if (selectedRows.length == 0) {
            $.messager.alert("系统提示", "请选择要删除的数据！");
            return;
        }
        var strIds = [];
        for (var i = 0; i < selectedRows.length; i++) {
            strIds.push(selectedRows[i].id);
        }
        var ids = strIds.join(",");
        $.messager
            .confirm(
                "系统提示",
                "您确认要删除这<font color=red>" + selectedRows.length
                + "</font>条数据吗？",
                function (r) {
                    if (r) {
                        $.ajax({
                            type: "GET",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: "/user/delete/" + ids,//url
                            data: {},
                            success: function (result) {
                                console.log(result);//打印服务端返回的数据
                                if (result.resultCode == 200) {
                                    $.messager.alert(
                                        "系统提示",
                                        "数据已成功删除！");
                                    $("#dg").datagrid(
                                        "reload");
                                }
                                else {
                                    $.messager.alert(
                                        "系统提示",
                                        "数据删除失败！");
                                }

                                ;
                            },
                            error: function () {
                                $.messager.alert("ERROR！");
                            }
                        });
                    }
                });

    }

    function openArticleAddDialog() {
        editor.html('请输入内容');
        $("#dlg").dialog("open").dialog("setTitle", "添加文本信息");
        method = "POST";
    }

    function saveUser() {
        var username = $("#username").val();
        var telphone = $("#telphone").val();
        var email = $("#email").val();
        var address = $("#address").val();
        var sex = $("#sex").val();
        var age = $("#age").val();
        var id = $("#uid").val();
        var status=$("#status").val();
        var data = {"id":id,"username": username, "telphone": telphone, 
        		   "email": email,"address":address,"sex":sex,"age":age,"status":status};
        $.ajax({
            type: method,//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: url,//url
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            success: function (result) {
                console.log(result);//打印服务端返回的数据
                if (result.resultCode == 200) {
                    $.messager.alert("系统提示", "保存成功");
                    $("#dlg").dialog("close");
                    $("#dg").datagrid("reload");
                    resetValue();
                }
                else {
                    $.messager.alert("系统提示", "操作失败");
                    $("#dlg").dialog("close");
                    resetValue();
                }
                ;
            },
            error: function () {
                $.messager.alert("系统提示", "操作失败");
            }
        });
    }

    function openArticleModifyDialog() {
        var selectedRows = $("#dg").datagrid('getSelections');
        if (selectedRows.length != 1) {
            $.messager.alert("系统提示", "请选择一条要编辑的数据！");
            return;
        }
        var row = selectedRows[0];
        $("#dlg").dialog("open").dialog("setTitle", "修改信息");
        $('#fm').form('load', row);
        $('#userid').text(row.id);
        $("#uid").val(row.id);
        $("#status").val(row.status);
        url="/user/update";
    }

    
    function showChineseStatus(value,row,index){
        var st=row.status;
        if(st=='ON'){
        	return "可用";
        }
        if(st=='OFF'){
        	return "禁用";
        }
    }

    function resetValue() {
        $("#title").val("");
        $("#addName").val("");
        $("#container").val("");
        editor.html();
    }

    function closeArticleDialog() {
        $("#dlg").dialog("close");
        resetValue();
    }
</script>
</body>
</html>
